ספר הבישול של דפי הסגנון

הקדמה | פאנלים צדדיים | קישורים | טקסט | ניווט | דמויות | נקודות ציון

פסי ניווט בעזרת CSS

באופן נפוץ, במקום שאתר מורכב ממספר דפים או חלקים, ממוקם "navigation bar (פס ניווט)" מראה קישור מובחן וע"י גבול שמפריד אותו מהדף המקיף אותו. תוכתו לראות אחד כזה בחלק העליון והתחתון של כל העמודים בספר בישול זה.

פס הניווט בדפים אלה משתמש במאפיינים אלה כדי להבחין את עצמו. כדי ליצור פס ניווט שכזה, עלינו ליצור פיסקה שמכילה את הקישורים שאליהם מנווטים, ואז להוסיף אותם לדף הסגנון שלכם כך שיש לפס את המאפיינים הדרושים. זה מה שנלמד לעשות במתכון זה.

ב-HTML:

פס הניווט שלנו צריך להיות רק פיסקה עם הקישורים ההכרחיים. התוספת היחידה היא שהפיסקה צריכה להיות ממעמד מסויים, כך שנוכל ליישם סגנון עבור הפיסקה בלבד, ולא לפיסקאות האחרות שבדף. עבור דף זה, פס הניוט HTML שלנו נראה כך

<p class="navigation-bar"><a href="index.html">introduction</a>
<a href="side_panels.html">side panels</a>
<a href="links.html">links</a>
<a href="appearance.html">text</a>
<a href="navigation_bars.html">navigation</a>
<a href="text_and_images.html">images</a>
<a href="bullets.html">bullets</a></p>

בדף הסגנון

אנו רוצים ליצור צבע רקע, למרכז את הטקסט, ולמקם גבול מסביב לכל פס הניווט. אז נרצה ליצור סגנונות מסויימים עבור הקישורים בפס הניווט.

הפיסקה

צבע הרקע

ראינו, כעת, כיצד לתת לאלמנט צבע רקע מסויים מספר פעמים. כך אנו עושים זאת

P.navigation-bar
{background-color: black;}

טקסט יישור

ראינו גם כיצד ליישר טקסט בעזרת המאפיין יישור-טקסט (text-align). כך אנו עושים זאת.

P.navigation-bar
{background-color: black;
text-align: center}

גבולות

בעזרת ה-pull quote יצרנו גבולות מסביב לאלמנט. אנו משתמשים באותו המאפיין כדי לשים גבול מסביב לפס הניווט.

P.navigation-bar
{background-color: black;
border: medium #ffffff solid;
text-align: center}

ריפוד

הוספנו גם מעט ריפוד כדי לסייע לנוחות הקריאה, כך שנוצר מרווח מסויים בין הקצוות של האלמנט והטקסט. אנו ראינו זאת גם בדוגמת ה-pull quote

P.navigation-bar
{background-color: black;
border: medium #ffffff solid;
padding: 1%;
text-align: center}

הקישורים

עלינו ליצור, עדיין, את כלל דף הסגנון עבור הקישורים בפס הניווט שלנו. איננו יכולים פשוט ליישם סגנון עבור כל הקישורים בדף שלנו, מכיוון שלא כולם נמצאים בפס הניווט. נחשוב, אולי, שעלינו ליצור מעמד חדש עבור הקישורים בפס הניווט. אך לא יהיה זה נחמד אם יכולנו לבחור רק קישורים בתוך פיסקאות של מעמד פס ניווט? ובכן, אנו יכולים (ידעתם שאני אגיד את זה, נכון?)

כך זה נעשה. אנו צריכים סוג בורר שונה במקצת. סוג בורר זה עורך רשימה של האלמנט המכיל (container element), ואז של האלמנט המוכל בתוכו. במקרה כזה

P.navigation-bar A:link

P.navigation-bar A:visited

וכו' ...

אז אנו יוצרים את המאפיינים כדי לסיים את פס הניווט שלנו. במקרה זה, טקסט לבן, שכאשר העכבר עומד עליו, הוא משתנה לטקסט שחור עם צבע רקע הזהה לזה של גוף הדף.

P.navigation-bar A:link
{color: white;
text-decoration: none}

P.navigation-bar A:hover
{background-color: #ffb0d3;
color: black;
text-decoration: none}

הקדמה | פאנלים צדדיים | קישורים | טקסט | ניווט | דמויות | נקודות ציון